Async Await Deep Dive

TL;DR

async/await is syntactic sugar over promises: an async function always returns a promise, await suspends execution and resumes the continuation as a microtask, and rejected promises surface as ordinary thrown errors. A senior answer ties this to the event loop — microtasks drain before the next macrotask — and knows to use AbortController for cancellation and to keep heavy CPU work off the main thread.

How it works

Key mechanics

• async functions return a Promise.
• await pauses execution and resumes on microtask completion.
• Errors in awaited promises throw like synchronous errors.

const load = async () => {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('bad response');
  return res.json();
};

Event loop notes

• Microtasks run before the next macrotask.
• Avoid blocking the main thread with heavy CPU work.

Cancellation

• Use AbortController for fetch and other DOM APIs.

Interview prompt

• Explain the ordering of Promise.resolve, queueMicrotask, and setTimeout.